<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'

const router = useRouter()

let myPath = ref('')

function fun(id, language) {
  // router.push('/detailPathParam/1/java')
  router.push({
    name: 'showDetail',//这里使用params把参数拼接到url后面，需要在router.js中定义路由的名称，再在这里使用名称找到路由
    params: {pathParamId: id, pathParamLanguage: language}
  })
}

function fun2() {
  router.push({
    path: myPath.value,
    query: {
      keyValueParamId: '2',
      keyValueParamLanguage: 'C++'
    }
  })
}

</script>

<template>
  <div>
    请输入路径：<input v-bind:type="'text'" v-model="myPath" /><br/>
    <input v-bind:type="'button'" v-bind:value="'路径传参跳转'"  @click="fun(1, 'Java')"/>
    <input v-bind:type="'button'" v-bind:value="'路径传参跳转'"  @click="fun(2, 'C#')"/>
    <input v-bind:type="'button'" v-bind:value="'键值对传参跳转'"  @click="fun2()"/>
    <hr />
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>
